<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <button onclick="getMove()">ajax获取热门电影</button>
     <button onclick="getUser()">ajax请求传参get</button>
     <button onclick="postLogin()">ajax发送post请求</button>
    <div class="box">

    </div>
    <label for="">用户名</label>
    <input type="text" id="username">
    <br>
    <br>
    <label for="">密码</label>
    <input type="text" id="password">
    <button onclick="userLogin()">登录</button>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/template.js"></script>
<script id="move" type="text/html">
    {{each data as item}}
    <div>
        <img src="{{item.poster}}" alt="">
        <div>{{item.name}}</div>
    </div>
    {{/each}}
</script>
<script>
    // console.log($)
    // function getMove(){
    //     $.ajax({
    //         // 请求地址
    //         url:"/hot/move",
    //         // 请求方式
    //         method:"get",
    //         // 数据交换格式
    //         dataType:"json",
    //         // 请求成功执行的回调函数 data 表示请求到的数据(服务端响应数据)
    //         success:function(data){
    //             console.log("成功啦",data)
    //             let moveList = data.data.films;
    //             console.log(moveList)
    //             let html = "";
    //             moveList.forEach(item=>{
    //                 let div = `<div><img src='${item.poster}' alt=''> <div>${item.name}</div></div>`
    //                 html+=div
    //             })
    //             $(".box").html(html)
    //         },
    //         // 请求失败执行的回调函数
    //         error:function(err){
    //             console.log("err",err)
    //         }
    //     })
    // }

    // 使用promise封装ajax;
    function ajaxHttp() {
        return new Promise((reslove, reject) => {
            $.ajax({
                // 请求地址
                url: "/hot/move",
                // 请求方式
                method: "get",
                // 数据交换格式
                dataType: "json",
                success(data) {
                    reslove(data)
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

    async function getMove() {
        let data = await ajaxHttp();
        let moveList = data.data.films;
        console.log(moveList)
        let html = template("move",{data:moveList})
        $(".box").html(html)
    }
   let name = '张三'
    // get请求传递参数
    function getUser(){
        $.ajax({
            // 路径传递参数
            // url:"/get/user?username="+name+"&age=18",
            url:"/get/user",
            method:"get",
            // 请求传递的参数 为一个对象 若为get请求会自动将参数拼接到路径上
            data:{
                username:name,
                age:18,
                sex:"男",
                phone:110
            },
            success(data){
                console.log(data)
            },
            error(err){
                console.log(err)
            }
        })
    }
    // 发送post请求
    function postLogin(){
        $.ajax({
            url:"/login",
            method:"post",
            dataType:"json",
            success(res){
                console.log(res)
            },
            error(err){
                console.log(err)
            }
        })
    }
    
    function userLogin(){
        let username = $("#username").val();
        let password = $("#password").val();
        $.ajax({
            url:"/user/login",
            method:"post",
            // ajax会自动设置请求头
            // 设置请求头
            // headers:{
            //     contentType:""
            // },
            // 请求参数
            data:{
                username:username,
                password:password
            },
            success(data){
                console.log(data)
            },
            error(err){
                console.log(err)
            }
        })
    }
</script>

</html>